<script setup>
  import {ref,reactive, onMounted} from 'vue';
  import axios from 'axios';
  let text=ref('false');
  let keyword=ref('');
  let blogs=reactive([]);
  let blog=reactive({
    id:0,
    title:'',
    content:'',
    flag:''
  })
  onMounted(async()=>{
    let res=await axios.get('http://localhost:3000/blogs');
    let data=res.data;
    data.data.forEach(item => {
      blogs.push(item);
    });
  })
  function btnAdd(){
    text.value=true;
    title='',
    content='',
    flag=''
  }
  async function btnDel(id){
    if(confirm('确定要删除？')){
    let res=await axios.delete(`http://localhost:3000/blogs/${id}`);
    if(res.data.code===1000){
      let index=blogs.findIndex(item=>item.id==id);
      if(index!=-1){
        blogs.splice(id,1)
      }
    }
    }
  }
  async function btnEdit(id){
    text.value=true;
    let res=await axios.get(`http://localhost:3000/blogs/${id}`);
    if(res.data.code===1000){
    let arr=res.data.data;
    blog.id=arr.id;
    blog.title=arr.title;
    blog.content=arr.content;
    blog.flag=arr.flag;
    }
  }
  async function btnSave(id){
    if(id>0){
      let res=await axios.put(`http://localhost:3000/blogs`,blog);
      if(res.data.code===1000){
        let tmpblogs=blogs.filter(item=>{
         return item.id==id;
        })[0];
        tmpblogs.title=blog.title;
        tmpblogs.content=blog.content;
        tmpblogs.flag=blog.flag;
        text.value=false;
      }
    }else{
      let res=await axios.post(`http://localhost:3000/blogs`,blog);
      if(res.data.code===1000){
          blogs.push(res.data.data);
          text.value=false
      }
    }
  }
  function btnCel(){
    text.value=false
  }
  async function btnFind(){
    keyword=keyword.value.trim();
      let res=await axios.get(`http://localhost:3000/blogs?keyword=${keyword}`);
      if(res.data.code===1000){
        if(keyword==''){
            item.hide=false
        }else{
          blogs.forEach(item=>{
            item.hide=true;
            let data=res.data.data;
            data.forEach(i=>{
              if(item.id==i.id){
                item.hide=false;
              }
            })
          })
        }
      }
  }
</script>

<template>
  <div class="big">
    <div>
      <input type="text" placeholder="请输入" v-model="keyword">
      <input type="button" value="查找" @click="btnFind">
      <input type="button" value="新增" @click="btnAdd">
    </div>
    <div>
      <table>
        <tr>
          <th>id</th>
          <th>标题</th>
          <th>内容</th>
          <th>标签</th>
          <th>操作</th>
        </tr>
        <tr v-for="item in blogs" :key="item.id" v-show="!item.hide">
          <td>{{item.id}}</td>
          <td>{{item.title}}</td>
          <td>{{item.content}}</td>
          <td>{{item.flag}}</td>
          <td>
            <input type="button" value="删除" @click="btnDel(item.id)">
            <input type="button" value="编辑" @click="btnEdit(item.id)">
          </td>
        </tr>
      </table>
    </div>
    <div class="text">
      <table v-show="text">
        <tr>
          <td>标题：</td>
          <td><input type="text" v-model="blog.title" ></td>
        </tr>
        <tr>
          <td>内容：</td>
          <td><input type="text" v-model="blog.content" ></td>
        </tr>
        <tr>
          <td>标签：</td>
          <td><input type="text" v-model="blog.flag" ></td>
        </tr>
        <tr>
          <td><input type="button" value="保存" @click="btnSave(blog.id)"></td>
          <td><input type="button" value="取消" @click="btnCel"></td>
        </tr>
      </table>
    </div>
  </div>
</template>

<style scoped>
  table,tr,th,td{
    border: 1px solid;
    border-collapse: collapse;
  }
  .text{
    position: fixed;
    background-color: rgba(11, 11, 12, 0.5);
  }
</style>
